<template>
	<div>
		<div class="">
			<a-row :gutter="[25, 20]">
			    <a-col v-for="(item,index) in vipList" :key="index" :span="6">
					<div class="vip-item flex1 box-shadow text-align p-r br-5 padding-10 cursor-p" style="height: 320px;" :style="item.status==1?'background-color: #77c9ff':'background-color: #ffc7ac'">
						<div class="vip-label">{{item.day}}天</div>
						<p class="m-t-50 font-18">{{item.title}}</p>
						<div class="d-red">￥<span class="font-25 font-b">{{item.price}}</span></div>
						<p class="m-t-20 text-align-l text-ellipsiss w-l-c-3">{{item.desc}}</p>
						
						<div class="m-t-20 flex flex-jc-c">
							<a-button type="primary" danger class="m-r-20" size="small" @click="delVip(item.id)">
							    <template #icon><DeleteOutlined /></template>
								删除
							</a-button>
							<a-button type="primary" size="small" @click="editVip(item)">
							    <template #icon><FormOutlined /></template>
								编辑
							</a-button>
						</div>
					</div>
				</a-col>
				
				<a-col :span="6">
					<div class="vip-item flex flex-jc-c flex-ai-c flex-w-w box-shadow p-r br-5 padding-10 cursor-p" style="background-color: #e8e8e8;height: 320px;" @click="visible = true">
						<div class="text-align white">
							<div class="w-100 m-b-10">
								<PlusCircleOutlined style="font-size: 40px;" />
							</div>
							<a-button type="primary" danger class="">添加VIP</a-button>
						</div>
						
					</div>
				</a-col>
			</a-row>
		</div>
		
		<a-modal v-model:visible="visible" title="添加VIP" :footer="null">
		    <a-form :label-col="{span: 4}" :wrapper-col="{span: 14}">
		    	<a-form-item label="会员类型">
		    		<a-select v-model:value="formData.type" style="width: 120px">
		    		    <a-select-option value="ziyuan">资源</a-select-option>
		    		    <a-select-option value="kecheng">课程</a-select-option>
		    		</a-select>
		    	</a-form-item>
		    	<a-form-item v-if="formData.type == 'ziyuan'" label="资源分类">
		    		<a-select v-model:value="formData.category_id" style="width: 120px">
		    		    <a-select-option value="all">全部</a-select-option>
		    		    <a-select-option v-for="(item,index) in ziyuanCategorys" :key="index" :value="item.id">{{item.title}}</a-select-option>
		    		</a-select>
		    	</a-form-item>
		    	<a-form-item label="会员名称">
		    		<a-input v-model:value="formData.title" />
		    	</a-form-item>
		    	<a-form-item label="价格">
		    		<a-input v-model:value="formData.price" oninput="value=value.match(/^\d+(?:\.\d{0,2})?/);" />
		    	</a-form-item>
		    	<a-form-item label="有效天数">
		    		<a-input v-model:value="formData.day" oninput="value=value.replace(/^0(0+|\d+)|[^\d]+/g,'')" />
		    	</a-form-item>
		    	<a-form-item label="会员描述">
		    		<a-textarea v-model:value="formData.desc" />
		    	</a-form-item>
		    	<a-form-item label="状态">
		    		<a-radio-group v-model:value="formData.status">
		    		    <a-radio value="1">开启</a-radio>
		    		    <a-radio value="0">关闭</a-radio>
		    		</a-radio-group>
		    	</a-form-item>
		    	<a-form-item class="marginButton" :wrapper-col="{ span: 14, offset: 2 }">
		    		<a-button v-if="formData?.id" type="primary" @click="onSubmit">保存</a-button>
		    		<a-button v-else type="primary" @click="onSubmit">添加VIP</a-button>
		    	</a-form-item>
		    </a-form>
		</a-modal>
	</div>
</template>

<script>
	import systemApi from '../../api/system.js'
	import ziyuanApi from '../../api/resource.js'
	import { Modal } from 'ant-design-vue';
	
	export default {
		data() {
			return {
				value: '',
				ziyuanCategorys: '',
				vipList: '',
				
				formData: {
					title: '',
					desc: '',
					type: 'ziyuan',
					category_id: 'all',
					day: '',
					price: '',
					status: '1',
				},
				
				visible: false
			}
		},
		mounted() {
			this.getVipList()
			this.getZiyuanCategorys()
		},
		methods: {
			onSubmit() {				
				systemApi.vip(this.formData).then(res => {
					let msg = this.formData?.id ? '修改成功' : '添加成功'
					if(res.status == 1){
						this.visible = false
						this.getVipList()
						this.$message.success(msg)
					}
				})
			},
			getZiyuanCategorys(){
				ziyuanApi.getZiyuanCategorys(false).then(res => {
					if(res.status == 1){
						this.ziyuanCategorys = res.result
					}
				})
			},
			getVipList(){
				systemApi.getVipList().then(res => {
					if(res.status == 1){
						this.vipList = res.result
					}
				})
			},
			editVip(item){
				this.formData = item
				if(item.category_id && item.category_id != 'all'){
					this.formData.category_id = parseInt(item.category_id)
				}
				this.formData.status = String(item.status)
				this.visible = true
			},
			delVip(id){
				let _this = this
				Modal.confirm({
					title: () => '确定要删除吗?',
					okText: '确认',
					cancelText: '取消',
					onOk() {
						_this.delData(id)
					},
				})
			},
			delData(id){
				systemApi.delVip({id:id}).then(res => {
					if(res.status == 1){
						this.getVipList()
						this.$message.success('删除成功')
					}
				})
			}
		}
	}
</script>
<style scoped>
</style>